<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-03 17:04:44
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-06 17:40:35
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100px;
            padding: 20px;
            border: 2px solid #333;
            border-radius: 5px;
            margin: 50px auto;
        }

        hr {
            margin: 10px 0;
        }
    </style>
</head>

<body>


    <div class="box">
        <input type="checkbox"> 全选 <br />
        <input type="checkbox" id="noselect"> 反选
        <hr>
        <input class="item" type="checkbox"> 选项一 <br>
        <input class="item" type="checkbox"> 选项二 <br>
        <input class="item" type="checkbox"> 选项三 <br>
        <input class="item" type="checkbox"> 选项四 <br>
    </div>

    <script>
        // 用户点击全选 
        // 如果全选按钮被选中  那么 下面四项都被选中 

        //如果下面四项都选中了 那么全选也被选中
        
        // 01 先选中元素 
        // 全选 
        var allBtn = document.querySelector('input');
        var noBtn = document.querySelector('#noselect');

        var items=  [...document.querySelectorAll('.item')];

        // console.log(items)
        allBtn.onclick = function(){
            items.forEach(function(item){
                item.checked = allBtn.checked
            });
        }
        //挨个给每个选项添加点击事件
        items.forEach(function(item){
            item.onclick = handler; 
        })
        //验证是否都选中得了
        function handler(){
            allBtn.checked = items.every(function(item){
            return item.checked == true;
            })
        }

        noBtn.onclick = function(){
            items.forEach(function(item){
                if(item.checked){
                    item.checked = false;
                }else{
                    item.checked = true;
                }
                
            });
        }

    </script>
</body>

</html>